<template>
	<view class="agentWorkOrderList">
		<view class="headPickerCon bg-grey">
			<picker v-model="search.time" :range="timeOption" range-key="label" :value="search.time" @change="searchChange">
				<view class="headPickerView">
					{{ timeOption[search.time].label }}
					<text class="cuIcon-unfold margin-left-xs"></text>
				</view>
			</picker>
		</view>
		<view>
			<scroll-view scroll-x class="bg-white nav text-center">
				<view
					class="cu-item"
					:class="index == search.status ? 'text-blue cur' : ''"
					v-for="(item, index) in statusOption"
					:key="index"
					@tap="tabChange(item)"
					:data-id="index"
				>
					{{ item.label }}
				</view>
			</scroll-view>
		</view>
		<view>
			<scroll-view scroll-y="true" class="scrollView listCon" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll">
				<view class="listItemCard" v-for="item in list" :key="item.OID">
					<view class="listItemCon" @click="itemClick(item)">
						<view class="listItemIconCon "><text class="cuIcon-edit listItemIcon" :style="{ color: statusFilter(item.FK_Node) }" /></view>
						<view class="listItemContentCon">
							<view class="listItemTitle">{{ item.serviceNo }}</view>
							<view class="listItemNameCon">
								<view>
									<text class="cuIcon-people listItemContentIcon padding-right-xs"></text>
									{{ item.contactName }}
								</view>
								<view>
									<text class="cuIcon-sort listItemContentIcon padding-right-xs"></text>
									{{ item.serviceSegmentation | serviceTypeDict }}
								</view>
							</view>
							<view class="listItemAddressCon">
								<text class="cuIcon-location listItemContentIcon padding-right-xs"></text>
								{{ item.address }}
							</view>
							<view class="listItemTimeCon">
								<text class="cuIcon-calendar listItemContentIcon padding-right-xs"></text>
								{{ item | orderDutyTimeFilter }}
							</view>
						</view>
						<view class="listItemStatusCon" :style="{ color: statusFilter(item.FK_Node) }">{{ item.NodeName }}</view>
					</view>
				</view>
				<u-empty margin-top="12"  :show="listLength == 0" mode="data"></u-empty>
			</scroll-view>
		</view>
		<view><uni-pagination :current="pageIndex" :total="total" :page-size="pageSize" prev-text="上一页" next-text="下一页" @change="pageChange" /></view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import qs from 'qs';
export default {
	data() {
		return {
			list: [],
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			search: {
				time: 0,
				search: '',
				status: 0
			},
			timeOption: [
				{
					value: 0,
					label: '全部'
				},
				{
					value: 1,
					label: '今日工单数'
				},
				{
					value: 2,
					label: '本周工单数'
				},
				{
					value: 3,
					label: '本月工单数'
				}
			],
			statusOption: [
				{
					value: 0,
					label: '全部'
				},
				{
					value: 1,
					label: '确认订单'
				},
				{
					value: 2,
					label: '成功分派'
				},
				{
					value: 3,
					label: '预约确认'
				},
				{
					value: 4,
					label: '服务完成'
				}
			],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			pageReady: false
		};
	},
	computed: {
		accountType() {
			return this.$store.state.user.userInfo ? this.$store.state.user.userInfo.accountType : null;
		},
		listLength() {
			return this.list.length;
		}
	},
	onShow() {
		this.webUserInit()
			.then(res => {
				console.log(res);
				if (res && res.No) {
					this.getList();
					return;
				} else {
					return this.loginByNo({
						no: this.$store.state.user.userInfo.No
					});
				}
			})
			.then(res => {
				console.log(res);
				if (res && res.code == '000000') {
					this.getList();
				}
			})
			.catch(err => {
				console.log(err);
			});
	},
	onHide() {
		this.pageReady = false;
	},
	methods: {
		...mapActions({
			getWorkOrderListByFws: 'workOrder/getWorkOrderListByFws',
			getWorkOrderListByFwsTy: 'workOrder/getWorkOrderListByFwsTy',
			webUserInit: 'user/webUserInit',
			loginByNo: 'user/loginByNo'
		}),
		statusFilter(value) {
			let color = {
				901: '#409eff', //开始
				902: '#E6A23C', //确认订单
				903: '#9BEFEC', //成功派单
				904: '', //
				905: '#ffe78f', //预约确认
				906: '#67C23A', //服务完成
				907: 'red', //服务取消
				908: '#E6A23C', //确认订单
				909: '#9BEFEC', //成功派单
				910: '#ffe78f' //预约确认
			};
			return color[value] || 'black';
		},
		getList() {
			let sendData = {
				page: this.pageIndex,
				limit: this.pageSize,
				statistics: this.search.time,
				search: this.search.search,
				status: 0,
				data: '',
				sceneId: '',
				type: 0
			};
			let apiName = 'getWorkOrderListByFws';
			if (this.accountType == '1') {
				sendData.acceptor = this.$store.state.user.userInfo.No;
				switch(this.search.status) { 
				   case 1: { 
				      sendData.data = `{
				        "NodeName": {
				      	"condition": "is",
				      	"value": "确认订单",
				      	"formType": "select",
				      	"name": "NodeName"
				        }
				      }`
				      break; 
				   } 
				   case 2: { 
				      sendData.data = `{
				        "NodeName": {
				      	"condition": "is",
				      	"value": "成功派单",
				      	"formType": "select",
				      	"name": "NodeName"
				        }
				      }`
				      break; 
				   } 
				   case 3: {
				      sendData.data = `{
				        "NodeName": {
				      	"condition": "is",
				      	"value": "预约确认",
				      	"formType": "select",
				      	"name": "NodeName"
				        }
				      }`
				      break; 
				   } 
				   case 4: {
				      sendData.data = `{
				        "NodeName": {
				      	"condition": "is",
				      	"value": "服务完成",
				      	"formType": "select",
				      	"name": "NodeName"
				        }
				      }`
				      break; 
				   } 
				}
			} else if (this.accountType == '2') {
				apiName = 'getWorkOrderListByFwsTy';
				sendData.master = this.$store.state.user.userInfo.No;
			}
			this[apiName](sendData)
				.then(res => {
					console.log(res);
					if (res.code == 0) {
						this.selectedRows = [];
						this.curDetail = {};
						this.list = res.data.list;
						this.total = res.data.totalRow;
					}
					let str = this.timeOption[this.search.time].label.replace(/\(.{0,}\)/g, '');
					this.$set(this.timeOption, this.search.time, {
						value: this.search.time,
						label: `${str}(${res.data.totalRow})`
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		searchChange(e) {
			this.pageIndex = 1;
			this.search.time=e.target.value;
			this.$nextTick(() => {
				this.getList();
			});
		},
		tabChange(e) {
			console.log(e);
			this.search.status = e.value;
			// this.searchChange();
			this.$nextTick(() => {
				this.getList();
			});
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		pageChange(obj) {
			console.log(obj);
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.getList(obj.current);
		},
		itemClick(item) {
			let params = {
				WorkID: item.OID,
				FK_Node: item.FK_Node,
				FK_Flow: '009',
				FID: item.FID,
				hideSend: 'false'
			};
			if (item.FK_Node == 908 || item.FK_Node == 909 || item.FK_Node == 910) {
				params.type = 'detail';
			} else {
				params.type = 'view';
				params.hideSend = 'true';
				params.formDisable = true;
			}
			if (item.acceptor != this.$store.state.user.userInfo.No && this.$store.state.user.userInfo.accountType == '1') {
				params.forceSend = 'true';
			}
			uni.navigateTo({
				url: `/agentPages/agent/agentFlowDetail?${qs.stringify(params)}`
			});
		}
	}
};
</script>

<style lang="less">
@contentFontSize: 24rpx;
@primaryColor: #264e86;
.agentWorkOrderList {
	overflow: hidden;
	.scrollView {
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - (74rpx + 90rpx) - 42px);
		/* #endif */
	}
	.headPickerCon {
		padding: 12rpx;
		text-align: center;
	}
	.listCon {
		background-color: #eee;
		padding: 12rpx;
	}
	.listItemCard {
		margin-bottom: 12rpx;
		background-color: white;
		padding: 24rpx;
		.listItemCon {
			display: flex;
			padding-top: 8rpx;
			.listItemIconCon {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 16rpx;
				.listItemIcon {
					font-size: 60rpx;
				}
			}
			.listItemContentCon {
				flex: 1;
				padding: 0 8rpx;
				.listItemContentIcon {
					color: @primaryColor;
				}
				.listItemTitle {
					font-size: 30rpx;
					color: @primaryColor;
				}
				.listItemNameCon {
					display: flex;
					align-items: center;
					font-size: @contentFontSize;
					padding: 6rpx 0;
					view {
						flex: 1;
					}
				}
				.listItemAddressCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
				.listItemTimeCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
			}
			.listItemStatusCon {
				font-size: 26rpx;
			}
		}
	}
}
</style>
